<template>
    <el-dialog :model-value="localDialogVisible" :title="localTitle" :before-close="localCancelDialog" width="60%" top="5vh">
        <table-header
            placeholder="请输入媒资名称"
            :queryList="queryList"
            @pagination="getDataList"
            :rightColSpan="4"
            :leftColSpan="20"
        >
            <template #filter>
                <el-select v-model="queryList.seriestype" placeholder="请选择媒资类型" size="small" style="width:25%" >
                    <el-option
                    v-for="item,index in searchTypeList"
                    :key="index"
                    :label="item"
                    :value="index"
                    >
                    </el-option>
                </el-select>
                <el-input v-model="queryList.keyword" placeholder="请输入媒资名称" size="small" style="width:30%; margin-left: 10px" />
            </template>
            <template #operation>
                <el-button type="primary" @click="handleAddMedia" size="small">添加</el-button>
            </template>
        </table-header>
            
        <el-row class="table-box">
            <el-col :span="24" class="mt10 mb10">
                <el-table
                    v-loading="isloading"
                    :data="tableData.listData"
                    border
                    max-height="350"
                    highlight-current-row
                    @selection-change="handleSelectionChange"
                    @row-click="(row) => {handleRowClick(row)}"
                    ref="tableref"
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="缩略图" width="60">
                        <template #default="{row,$index}">
                            <el-image
                                v-if="row.images.length > 0"
                                :preview-src-list="srcList"
                                :initial-index="$index"
                                :src="row.images[0]"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="媒资ID" prop="csid" />
                    <el-table-column :show-overflow-tooltip="true" label="媒资名称" prop="sname" />
                    <el-table-column label="媒资类型" width="70">
                        <template #default="{row}">
                            {{searchTypeList[row.seriestype]}}
                        </template>
                    </el-table-column>
                    <el-table-column label="更新/总集数">
                        <template #default="{row}">
                            {{row.updatenum+'/'+row.totalnum}}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="50">
                        <template #default="{row}">
                            <span v-if="row.inuse == 1">上线</span>
                            <span v-else>下线</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="添加状态" width="70">
                        <template #default="{row}">
                            <span v-if="row.mediahave == 1" style="color:red">已添加</span>
                            <span v-else style="color:green">未添加</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" style="margin-top: 10px">
                <table-pagination
                :queryList="queryList"
                :total="tableData.total"
                @pagination="getDataList"
                />
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script>
    import TableHeader from "@/views/public/TableHeader";
    import TablePagination from "@/views/public/TablePagination";
    import { ref, toRef, reactive } from 'vue'
    import { getMediaList,postMaterialToMedia } from "@/api/media/materialmedia";
    import {ElMessage} from 'element-plus'
    export default {
        name: "",
        components: {
            TableHeader,
            TablePagination
        },
        props: {
            title:{
                type: String,
                default: ''
            },
            visible: {
                type: Boolean,
                default: false
            },
            groupid: {
                type: String
            }
        },
        emits: ['cancelDialog'],
        setup(props, context) {
            const localTitle = toRef(props, 'title')
            const localDialogVisible = toRef(props, 'visible')
            const localGroupid = toRef(props, 'groupid')
            const localCancelDialog = () => {
                context.emit('cancelDialog')
            }

            // 图片预览
            const srcList = ref([])
            const searchTypeList = ref({
                'movie':'电影',
                'tv':'电视剧',
                'variety':'综艺',
                'anime':'动漫',
                'documentary':'纪录片',
                'children':'少儿',
            })
            // 搜索条件
            const queryList = reactive({
                'page': 1,
                'pagesize': 10,
                'groupid': localGroupid,
                'keyword': ''
            })
            // 列表相关
            const isloading = ref(true)
            const tableData = reactive({
                total: 0,
                listData: []
            })
            const getDataList = () => {
                isloading.value = true;
                getMediaList(queryList).then(response => {
                    isloading.value = false;
                    const {total, list} = response.data
                    tableData.total = total
                    tableData.listData = list
                    srcList.value = []
                    list.forEach(item => {
                        if( typeof item.images.length > 0 ){
                            srcList.value.push(item.images[0])
                        }
                    })
                })
            }
            getDataList()
            
            // 复先框
            const checkBoxData = ref([])
            const tableref = ref(null)
            const handleSelectionChange = (val) => {
                if(val.length > 0){
                    checkBoxData.value = []
                    val.forEach(function(item){
                        checkBoxData.value.push(item.csid)
                    })
                }
            }
            const handleRowClick = (row) => {
                tableref.value.toggleRowSelection(row)
            }
            const handleAddMedia = () => {
                if( checkBoxData.value.length > 0 ){
                    let postData = {
                        'groupid': parseInt(localGroupid.value),
                        'csids': checkBoxData.value
                    }
                    postMaterialToMedia(postData).then(res=>{
                        console.log(res)
                    })
                }else{
                    ElMessage({type: 'warning', message: '请选择需要添加的素材数据', duration: 2000})
                }
            }
            return {
                localTitle,
                localDialogVisible,
                localGroupid,
                localCancelDialog,
                searchTypeList,
                queryList,
                srcList,
                tableref,
                isloading,
                tableData,
                getDataList,
                handleSelectionChange,
                handleRowClick,
                handleAddMedia
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>